<template>
  <div class="CustomImage" :style="{zIndex: dzIndex}">
    <img :src="csrc" alt="" :width="cwidth" :height="cheight">
  </div>
</template>
<script>
export default {
  name: 'CustomImage',
  props: {
    imgSrc: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 300
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    csrc() {
      return this.imgSrc
    },
    cwidth() {
      return this.width
    },
    cheight() {
      return this.height
    },
    dzIndex() {
      return this.zIndex
    }
  },
  methods: {
    
  },
}
</script>
<style lang="less">
  .CustomImage{
    img{
      display:block;
      background: #eee;
      &[src]{
        background: transparent;
      }
    }
  }
</style>